@import 'mixins';
@import 'vars';

/* stylelint-disable selector-class-pattern */

:host ::ng-deep {
    .ace_editor {
        background: $color-white;

        &.no-border {
            border: 0;
        }
    }

    .ace_tooltip {
        background: $color-white;
        border: 1px solid $color-input;
        border-radius: 0;
        line-height: 1.6;
        padding-left: 30px;
        padding-right: 5px;
        white-space: normal;

        .ace_icon {
            @include absolute(5px, null, null, 5px);
            white-space: pre;
        }
    }

    .ace_active-line,
    .ace_gutter-active-line {
        background: none !important;
    }

    .ace_gutter-active-line {
        background: darken($color-border, 5%) !important;
    }

    .ace_gutter {
        bottom: -1px;
    }

    .ace_bracket {
        display: none;
    }

    .ace_scroller {
        box-shadow: none !important;
    }

    .form-control {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        align-items: center;

        .editor {
            flex-grow: 1;
        }

        span {
            height: 1.5rem;
        }

        .ace_hidden-cursors {
            display: none;
        }
    }
}

.editor-container {
    border: 1px solid $color-input;
}